import React from 'react';
import { Transfer, Button } from 'antd';

export default class SetMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            targetKeys: [],
            selectedKeys: [],
            mockData: [
                { key: 'work', title: '工作' },
                { key: 'study', title: '学习' },
                { key: 'life', title: '生活' },
                { key: 'ideas', title: '我的创意' },
                { key: 'travel', title: '我的旅行' }
            ]
        };
    }

    handleChange(targetKeys, direct, moves) { // 左右穿梭事件
        console.log(targetKeys, direct, moves);
        this.setState({ targetKeys });
    }

    handleSelectChange(sKeys, tKeys) { // 选中选项事件
        console.log(sKeys, tKeys);
        this.setState({ selectedKeys: [...sKeys, ...tKeys] });
    }

    save() { // 保存
        console.log('保存', this.state.targetKeys);
    }

    render() {
        let { targetKeys, selectedKeys, mockData } = this.state;
        return (
            <div className="setMenu">
                <Transfer
                    dataSource={mockData}
                    locale={{ itemUnit: '项', itemsUnit: '项' }}
                    onChange={(targets, direct, moves) => this.handleChange(targets, direct, moves)}
                    onSelectChange={(sKeys, tKeys) => this.handleSelectChange(sKeys, tKeys)}
                    render={item => item.title}
                    selectedKeys={selectedKeys}
                    targetKeys={targetKeys}
                    titles={['未选择', '已选择']}
                />
                <p className="clear mb-20" />
                <Button onClick={() => this.save()} type="primary">保存</Button>
            </div>
        )
    }
}
export { SetMenu };